<template>
  <div class="container-box">
    <h2>管理员管理</h2>&nbsp;
    <span>一个管理员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</span>
    <!--筛选表单-->
    <div class="filter-form">
      <el-form ref="form" label-width="80px" :inline="true" size="medium" label-position="top">
        <el-form-item label="用户名">
          <el-input v-model.trim="queryData.username" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model.trim="queryData.nickname" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model.trim="queryData.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态">
          <SelectOption :query-data="queryData" aria-placeholder="请选择" />
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <span class="demonstration" />
            <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
        <el-form-item class="position">
          <el-button icon="el-icon-refresh" @click="onSearchReset">重置</el-button>
          <el-button icon="el-icon-search" type="primary" @click="onSearchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表单区域-->
    <div class="table-box">
      <!--操作区域-->
      <el-row type="flex" justify="end" class="tool-bar">
        <div>
          <el-button
            v-permission="'usercreate'"
            type="primary"
            size="small"
            @click="$refs.Dialog.drawer=true"
          >新增管理员</el-button>
        </div>
      </el-row>
      <el-table
        :header-cell-style="{
          background: '#fafafa'}"
        :data="list"
        row-key="id"
      >
        <!-- prop表示这一列展示哪个数据 -->
        <el-table-column width="60%" prop="id" label="ID" />
        <el-table-column width="100%" prop="username" label="用户名" />
        <el-table-column width="100%" prop="nickname" label="昵称" />
        <el-table-column width="100%" prop="avatar" label="头像">
          <template slot-scope="{row}">
            <!-- <img
              :src="$webURL+ row.avatar"
              style="width:40px;"
              alt=""
            > -->
            <el-image
              v-if="row.avatar"
              style="width:40px;"
              :src="row.avatar[0]"
              :preview-src-list="row.avatar"
            />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="email" label="Email" />
        <el-table-column prop="roleList" label="角色名">
          <template slot-scope="{row}">
            <el-tag v-for="item, index in row.roleList" :key="index" style="margin: 4px;" type="success" :label="item.id">{{ item.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="{row}">
            <span>{{ row.status === 1 ? '启用' : '关闭' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-permission="'userupdate'"
              size="small"
              type="text"
              @click="$refs.Dialog.reviewInfo(row.id)"
            >编辑</el-button>
            <el-popconfirm
              title="确定删除吗?"
              @confirm="delRow(row.id)"
            >
              <el-button
                slot="reference"
                v-permission="'userdestroy'"
                size="small"
                type="text"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <div class="page">
        <el-pagination
          :current-page.sync="queryData.current"
          :page-size="queryData.pageSize"
          layout="slot, prev, pager, next"
          :total="total"
          background
          small
          @size-change="sizeChange"
          @current-change="currentChange"
        >
          <span key="1" class="slot">第1-{{ total > 10 ? 10 : total % queryData.pageSize }}条/总共{{ total }}条</span>
        </el-pagination>
      </div>
    </div>
    <authUserDrawer ref="Dialog" @updateList="initData" />
  </div>
</template>
<script>
import { delUserAPI, getUserListAPI } from '@/api/authUser'
import SelectOption from '@/views/auth/components/select-option.vue'
import authUserDrawer from './components/authUserDrawer.vue'

export default {
  name: 'Tag',
  components: {
    SelectOption, authUserDrawer
  },
  data() {
    return {
      list: [],
      srcList: ['http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'],
      value1: '',
      queryData: {
        current: 1,
        pageSize: 10,
        create_time: ''
      },
      formData: {
        tagname: '',
        id: 0,
        default_data: 0
      },
      formRules: {
        tagname: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      },
      // 总数
      total: 0,
      // 控制弹框的显示
      dialogShow: false
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取数据
    async initData() {
      const res = await getUserListAPI(this.queryData)
      console.log(res.data.rows)
      // this.list = res.data.rows
      this.list = res.data.rows.map(item => {
        return { ...item, avatar: item.avatar ? item.avatar.split(',').map(item => {
          return this.$webURL + item
        }) : null }
      })
      console.log(this.list)
      this.list = this.list.map(item => {
        item.create_time = this.$moment(item.create_time).format('YYYY/MM/DD HH:mm:ss')
        return item
      })
      this.total = res.data.count
    },
    // 筛选表单搜索条件
    onSearchSubmit() {
      if (this.value1[0] && this.value1[1]) {
        const timeArr = [this.value1[0], this.value1[1]]
        this.queryData.create_time = timeArr.join(',')
        console.log(timeArr)
      }
      console.log(this.queryData)
      this.queryData.current = 1
      this.initData()
    },
    // 筛选表单重置
    onSearchReset() {
      this.queryData = {
        current: 1,
        pageSize: 10,
        create_time: ''
      }
      this.value1 = ''
      this.initData()
    },
    // 每页数量切换事件
    sizeChange(val) {
      // console.log(val)
      // this.queryData.limit = val
      // this.initData()
    },
    // 页码切换事件
    currentChange(val) {
      console.log(val)
      // this.queryData.page = val
      this.initData()
    },
    // 新增/修改标签
    async btnOk() {
      // await this.$refs.form.validate()
      // this.$message.success(this.formData.id ? '修改标签成功' : '添加标签成功')
      // this.dialogShow = false
      // this.initData()
    },
    // 清空表单和校验
    btnCancel() {
      this.formData = {
        // catename: '',
        // icon: '',
        // sort_num: 10
      }
      // this.$refs.form.clearValidate()
    },
    // 修改标签
    async editRow(id) {
      // this.formData.id = id
      // this.dialogShow = true
    },
    // 删除标签
    async delRow(id) {
      await delUserAPI(id)
      this.$message.success('删除成功')
      if (this.queryData.current > 1 && this.list.length === 1) {
        this.queryData.current--
      }
      this.initData()
    }
  }
}
</script>
<style lang="scss" scoped>

h2 {
  display: inline-block;
}
.container-box{
  padding: 30px;
}
.tool-bar{
  margin-bottom: 10px;
}
.table-box {
  position: relative;
  background-color: #fff;
  padding: 30px;
  padding-bottom: 50px;
}
// ::v-deep .el-table__header-wrapper {
//   background-color: rgb(250, 250, 250)!important;
// }
// scss 代码
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:before {
  content: "\e723";
  font-size: 16px;
}
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:hover {
  color: rgb(146, 188, 255);
}
::v-deep .el-table .el-table__expand-icon--expanded {
  transform: rotate(0);
  .el-icon-arrow-right:before {
    content: "\e722";
    font-size: 16px;
  }
}
svg {
  font-size: 18px;
}
.showname {
  position: absolute;
  z-index: 9999;
  top: 23px;
  left: 16px;
  color: #fff;
  font-size: 12px;
}
.hidename {
  display: none;
}
.el-button+.el-button {
  margin-left: 0;
  margin-right: 10px;
}
button, html [type="button"] {
  margin-right: 10px;
}
.filter-form {
  position: relative;
  background-color: #fff;
  padding: 15px 10px;
}
.position {
  position: absolute;
  top: 45%;
  right: 0;
}
.page {
  position: absolute;
  bottom: 10px;
  right: 30px;
}
.slot {
  margin-right: 5px;
  font-size: 12px;
  font-weight: 400;
}
.el-form-item {
  width: 13%;
}
</style>
